<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>视频上传</legend>
        <div class="layui-field-box">
            <div class="layui-col-md6">
                <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                    <!--表单控件项：文件上传（视频文件）-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频封面:</label>
                        <button class="layui-btn layui-btn-normal" type="button" id="btnImg">
                            <i class="layui-icon layui-icon-upload"></i>
                            选择文件
                        </button>
                        <!--通过隐藏域提交文件地址到服务端（封面图地址）-->
                        <input type="hidden" name="coverimg" id="coverimg" lay-verify="required"
                               lay-reqText="请上传封面图片"/>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频文件:</label>
                        <button class="layui-btn layui-btn-normal" type="button" id="btnVideo">
                            <i class="layui-icon layui-icon-upload"></i>
                            选择文件
                        </button>
                        <!--表单提交时提交视频总播放时长-->
                        <input type="hidden" name="url" id="url" lay-verify="required" lay-reqText="请上传视频文件"/>
                    </div>

                    <!--视频的频道选择控件-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频频道:</label>
                        <div class="layui-input-block">
                            <select name="cid" id="cid">
                                <option value="0">匿名</option>
                            </select>
                        </div>
                    </div>

                    <!--表单控件项：视频频道选择(从数据库加载)-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频标题:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="title" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入视频标题">
                        </div>
                    </div>

                    <!--表单控件项：视频标签-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频标签:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="tags" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入视频标签"
                                   placeholder="请输入视频标签,多个标签使用逗号(,)分隔">
                        </div>
                    </div>

                    <!-- 简介控件    -->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">视频简介:</label>
                        <div class="layui-input-block">
                            <textarea name="summary" class="layui-textarea" placeholder="请填写简介内容"></textarea>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit lay-filter="btnAdd">确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;

        //查询所有类别并在下拉列表中渲染
        $.ajax({
            url: "/video/categories",
            type: "get",
            success: function (resp) {
                var data = resp.data;
                var html = "";
                //循环遍历所有元素，并组合HTML代码
                $.each(data, function (i, item) {
                    html += "<option value='" + item.id + "'>" + item.name + "</option>"
                })
                //将生成的html代码插入指定位置
                $("#cid").html(html);
                //重新渲染表单
                form.render("select");
            }
        })

        // 文件上传组件渲染
        upload.render({
            elem: '#btnImg' //绑定触发上传操作的元素对象（按钮）
            , url: "/video/upload"   //服务器接收文件的地址
            , file: "file"       //服务端接收文件的参数名(文件域字段名)
            , accept: "images"   //指定允许上传的文件类型
            , acceptMime: "image/*"    //打开文件选择框时，默认筛选的文件类型
            , done: function (resp) {
                console.log(resp)
                if (resp.code === 200) {
                    //上传成功
                    //将文件地址写入隐藏域
                    $("#coverimg").val(resp.data);
                }
                layer.msg(resp.msg);
            }
        })

        upload.render({
            elem: '#btnVideo' //绑定触发上传操作的元素对象（按钮）
            , url: "/video/upload"   //服务器接收文件的地址
            , file: "file"       //服务端接收文件的参数名(文件域字段名)
            , accept: "file"   //指定允许上传的文件类型
            , acceptMime: "video/webm,video/ogg,video/mp4,video/avi,video/mkv"    //打开文件选择框时，默认筛选的文件类型
            , before: function () {
                //显示加载动画
                layer.load(1)
            }
            , done: function (resp) {
                //关闭动画
                layer.closeAll("loading")
                if (resp.code === 0) {
                    //上传成功
                    //将文件地址写入隐藏域
                    $("#url").val(resp.data);
                }
                layer.msg(resp.msg);
            }
        })

        //为表单绑定提交事件
        form.on('submit(btnAdd)', function (data) {
            //获取表单数据
            let formData = data.field;
            $.ajax({
                url: "/video/add",
                type: "post",
                data: formData,
                success: function (resp) {
                    if (resp.code === 0) {
                        //提示成功信息
                        layer.msg(resp.msg, {icon:layui-icon-success},function () {
                            //关闭当前窗口
                            layer.closeAll('iframe')
                            //刷新父窗口
                            parent.location.reload()
                        })
                    } else {
                        //提示失败信息
                        layer.msg(resp.msg, {icon:layui-icon-error})
                    }
                }
            })
        })


    })
</script>
</body>
</html>